<template>
  <div>
    <div>
      <el-date-picker v-model="importDate" type="month" placeholder="选择日期" action="none" class="center"
        format="yyyy 年 MM 月" value-format="yyyy-MM" style="transform: translateX(-50%);">
      </el-date-picker>
    </div>
    <div>
      <el-upload v-loading.fullscreen.lock="fullscreenLoading" class="upload-demo" ref="upload" drag action="#"
        :on-change="checkType" accept=".xlsx" :auto-upload="false" :multiple="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx文件，只上传最新文件</div>
      </el-upload>
    </div>
    <div>
      <el-button type="primary" @click="submitUpload" style="transform: translateX(-150%);" class="center">导入</el-button>
      <el-button type="primary" @click="handleDownload" style="transform: translateX(-75%);"
        class="center">模板下载</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImportExcel',
  mounted () {
    this.importDate = this.$store.state.app.date
  },
  watch: {
    importDate (newVal) {
      this.$store.commit('app/setDate', newVal)
      console.log(this.$store.state.app.date)
    }
  },
  data () {
    return {
      importDate: null,
      currentFile: null,
      fullscreenLoading: false
    }
  },
  methods: {
    handleDownload () {
      window.location.href = 'http://' + window.location.host + '/Template.xlsx'
    },
    checkType (file) {
      this.currentFile = file.raw
      console.log(this.currentFile)
    },
    templateDownload () {
      let url = '/excel/templateDownload'
      this.$util.http.get(url).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(new Error(err))
      })
    },
    submitUpload () {
      // 校验
      if (this.importDate === null) {
        this.$notify.warning({
          title: '处理结果',
          // eslint-disable-next-line standard/object-curly-even-spacing
          message: this.$createElement('i', { style: 'color: teal' }, '你还没有选择时间呢。')
        })
        return
      }
      if (this.currentFile === null) {
        // 清空file
        this.$notify.warning({
          title: '处理结果',
          // eslint-disable-next-line standard/object-curly-even-spacing
          message: this.$createElement('i', { style: 'color: teal' }, '你还没有上传文件呢。')
        })
        return
      }
      // 检查重复!!
      this.$util.http.get(`/excel/checkExcel/${this.importDate}`)
        .then(_res => {
          if (_res.data === false) {
            // 当有重复时
            this.$confirm('检查到有重复月份,此操作将永久覆盖原数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: '开始覆盖...'
              })
              this.importExcel()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消覆盖'
              })
            })
          } else {
            this.importExcel()
          }
        }).catch(_err => {
          this.$notify.error({
            title: '处理结果',
            // eslint-disable-next-line standard/object-curly-even-spacing
            message: this.$createElement('i', { style: 'color: teal' }, '检查失败，请检查故障。')
          })
        })
    },
    importExcel () {
      let formData = new FormData()
      formData.append('file', this.currentFile)
      formData.append('date', this.importDate)
      let url = '/excel/uploadExcelConvert'
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$refs.upload.submit()
      this.fullscreenLoading = true
      this.$util.http.post(url, formData, config).then(res => {
        // 清空file
        this.currentFile = null
        this.fullscreenLoading = false
        if (res.data === true) {
          this.$notify.success({
            title: '处理结果',
            // eslint-disable-next-line standard/object-curly-even-spacing
            message: this.$createElement('i', { style: 'color: teal' }, '导入成功了！！！！')
          })
        } else {
          this.$notify.error({
            title: '处理结果',
            // eslint-disable-next-line standard/object-curly-even-spacing
            message: this.$createElement('i', { style: 'color: teal' }, '导入失败，请检查故障。')
          })
        }
      }).catch(_err => {
        // console.log(new Error(err))
        this.fullscreenLoading = false
      })
    }
  }
}

</script>

<style scoped>
.upload-demo {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.center {
  position: relative;
  left: 50%;
}
</style>
